<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2019/6/20
  Time: 8:22
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <title>管理员</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/sharing/layuiadmin/layui/css/layui.css"  media="all">
</head>

<body>
<div class="demoTable">
    <div class="layui-inline">
        <input class="layui-input" name="userName" id="userName" autocomplete="off" placeholder="请输入管理员姓名：">
    </div>
    <div class="layui-inline">
        <input class="layui-input" name="telephone" id="telephone" autocomplete="off" placeholder="请输入管理员手机号：">
    </div>
    <button class="layui-btn" data-type="reload" >搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test">

</table>
</body>
<script id="toolbarDemo" type="text/html">
<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAllDel">批量删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    <button type="button" onclick="saveUser()" class="layui-btn layui-btn-sm">新增</button>
</div>
</script>
<script id="barDemo" type="text/html">
<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>

<script src="/sharing/layuiadmin/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'../user/userInfo'
            ,toolbar: '#toolbarDemo'
            ,title: '管理员数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'userId', title:'管理员编号',align:'center', width:120, fixed: 'left', unresize: true, sort: true}
                ,{field:'userName', title:'管理员姓名',align:'center', width:120, edit: 'text'}
                ,{field:'passWord', title:'管理员密码',align:'center', width:120, edit: 'text'}
                ,{field:'telephone', title:'手机号',align:'center', width:120, edit: 'text', sort: true}
                ,{field:'remarks', title:'备注',align:'center', width:120, edit: 'text', sort: true}
                ,{fixed: 'right', title:'操作' ,align:'center', toolbar: '#barDemo', width:150}
            ]]
            , page: {
                layout: ['prev', 'page', 'next', 'skip', 'limit', 'count']//自定义分页布局
                , group: 1  //只显示一个连续页码
                , limit: 5  //每页显示记录数
                , first: false//不显示首页
                , last: false//不显示尾页
            }
            , limits: [5, 10, 15, 20]
            ,id: 'testReload'
        });


        var $ = layui.$, active = {
            reload: function(){
                var userName=document.getElementById("userName").value;
                var telephone=document.getElementById("telephone").value;
                //var demoReload = $('#name');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        userName:userName,
                        telephone:telephone

                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    var Sout=JSON.stringify(data);
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'isAllDel':
                    //批量删除
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        parent.layer.alert('您尚未选择数据!');
                        return;
                    }
                    var ids = "";
                    for (var i = 0; i < data.length; i++) {
                        ids += data[i].userId + ",";
                    }
                    layer.confirm('您确定要删除选中数据吗？', function (index) {
                        layer.close(index);
                        $.ajax({
                            url: "#",
                            dataType: "json",
                            data: {ids: ids},
                            type: "GET",
                            parseData: function(res){ //res 即为原始返回的数据
                                return {
                                    "count": res.count, //解析数据长度
                                    "data":res.data,
                                };
                            },
                            success: function (da) {
                                layer.closeAll('loading');
                                if (da.data >0) {
                                    parent.layer.alert('数据已删除！');
                                    location.reload(true);
                                } else {
                                    parent.layer.alert("删除失败！");
                                }
                            },
                            error: function () {
                                parent.layer.alert("删除失败！");
                            }
                        });
                    });
            };

        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del') {
                layer.confirm('确定要删除吗？', {  //打开一个询问框
                    btn: ['删除', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: "..user/delUser",
                        dataType: "json",
                        data: {userId: data.userId},
                        type: "post",
                        success: function (data) {
                            if(data.msg==1){
                                layer.open({
                                    content: '删除成功'
                                    ,btn: ['确定']
                                    ,yes: function(index, layero){
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(index);
                                    }
                                });
                            }else{
                                layer.open({
                                    content: '删除失败'
                                    ,btn: ['确定']
                                    ,yes: function(index, layero){
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(index);
                                    }
                                });
                            }


                        }
                    })
                    //删除数据成功，怎么刷新页面
                    location.reload();
                }, function () {
                    layer.msg('已取消', {
                        //layer.close(),
                        time: 2000, //2s后自动关闭
                        //btn: ['明白了', '知道了']
                    });
                })
            } else if(obj.event === 'edit') {
                parent.layer.open({   //打开一个弹出层
                    title: '修改界面',   //弹出层的标题
                    maxmin: true,
                    type: 2,
                    content: '../user/editById?userId=' + data.userId, //要访问的地址
                    area: ['860px', '600px'],
                    end: function () { //表示弹出层关闭的时候的代码块
                        location.reload();
                    }

                });

            }
        });

    });
    //新增数据
    function saveUser() {
        parent.layer.open({   //打开一个弹出层
            title: '新增界面',   //弹出层的标题
            maxmin: true,
            type: 2,
            content: '../admin/saveUser.gsp', //要访问的地址
            area: ['800px', '500px'],

            end: function () { //表示弹出层关闭的时候的代码块
                location.reload();
            }
        });
    }
</script>
</html>